<template>
<div class="nav-box">
    <router-link to="trip" :class="{active:Active==1}">
        <img :src="Active==1?navTripA:navTrip" alt="">
        行程
    </router-link>
    <router-link to="list" :class="{active:Active==2}">
        <img :src="Active==2?navListA:navList" alt="">
        企业榜单
    </router-link>
    <router-link to="home" class="center"  :class="{active:Active==3}">
        <img :src="Active==3?navResourceA:navResource" alt="">
        旅游资源
    </router-link>
    <router-link to="dataReport"  :class="{active:Active==4}">
        <img :src="Active==4?navReportA:navReport" alt="">
        数据报告
    </router-link>
    <router-link to="mine"  :class="{active:Active==5}">
        <img :src="Active==5?navMineA:navMine" alt="">
        我的
    </router-link>
</div>
</template>
<script>
import navTrip from '@/assets/images/nav-trip.png'
import navTripA from '@/assets/images/nav-tripA.png'
import navList from '@/assets/images/nav-list.png'
import navListA from '@/assets/images/nav-listA.png'
import navResource from '@/assets/images/nav-resource.png'
import navResourceA from '@/assets/images/nav-resourceA.png'
import navReport from '@/assets/images/nav-report.png'
import navReportA from '@/assets/images/nav-reportA.png'
import navMine from '@/assets/images/nav-mine.png'
import navMineA from '@/assets/images/nav-mineA.png'
export default{
    name:'Nav',
     props:{
        Active:{
            type:Number,
            // 导航栏是否选中 1 2 3 4 5
            default:3
        }
    },
    data(){
        return{
            navTrip:navTrip,
            navTripA:navTripA,
            navList:navList,
            navListA:navListA,
            navResource:navResource,
            navResourceA:navResourceA,
            navReport:navReport,
            navReportA:navReportA,
            navMine:navMine,
            navMineA:navMineA,
        }
    }
}
</script>
<style lang="less" scope>
.nav-box{
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left:0;
    width:100%;
    height:98/7.5vw;
    box-sizing: border-box;
    border-top:1px solid #ccc;
    z-index: 99;
    background-color: #fff;
    >a{
        flex: 1;
        display: block;
        padding:10/7.5vw 0;
        text-align: center;
        font-size: 20/7.5vw;
        color: #999;
        &.active{
            color: #0FD2B2;
        }
    }
    img{
        display: block;
        width:42/7.5vw;
        margin: 0 auto;
    }
    .center{
        >img{
            width:100/7.5vw;
            margin-top:-50/7.5vw;
        }
    }
}
</style>